<template>
  <div class="detailWrap">
    <div class="detailContainer">
      <!-- 头部 -->
      <div class="detail-header">
        <div class="header-left">
          {{ good.name }} |
          <a href="#">{{ good.title }}</a>
        </div>
        <div class="header-right">
          <ul class="header-right-list">
            <li>概述页</li>
            <li>参数页</li>
            <li>安装须知</li>
            <li>F码通道</li>
            <li>咨询客服</li>
            <li class="clearborder">用户评价</li>
          </ul>
        </div>
      </div>
      <!-- 跳转登录 -->
      <div class="login">
        <span>为方便您购买，请提前登录</span>
        <router-link to="/login">立即登录</router-link>
        <i class="iconfont icon-cuowu"></i>
      </div>
      <!-- 商品详情区 -->
      <div class="centre">
        <!-- 商品详情区 左边栏 -->
        <!-- 放大镜区域 -->
        <Zoom :images="good.images" />
        <!-- <div class="centre-left">
          <img src="./images/kongtiao.png" alt="" />
        </div> -->
        <!-- 商品详情区 右边栏 -->
        <div class="centre-rigth">
          <!-- 标题 -->
          <div class="centre-rigth-title">
            <h2>{{ good.name }}</h2>
            <p>
              <span>{{ good.product_desc_ext }}</span>
            </p>
            <span class="shop">小米自营</span>
            <div class="goods-price">{{ good.price_max }}元</div>
          </div>
          <!-- 订金 取消 -->
          <!-- <div class="centre-rigth-earnest">
            <div class="centre-rigth-earnest-left">
              <div class="top">
                <span class="top-subscription">订金</span>
                ￥
                <span class="top-price">100</span>
                <span class="top-voucher">抵300元</span>
              </div>
              <div class="bottom">
                <span>预售价</span>
                <span>￥ 2899</span>
              </div>
            </div>
            <div class="centre-rigth-countdown">
              距结束 2天
              <span>05</span>
              :
              <span>28</span>
              :
              <span>26</span>
            </div>
          </div> -->
          <!-- 地址 -->
          <div class="site">
            <div class="site-top">
              <div class="address">
                <i class="iconfont icon-31dingwei"></i>
                <span>北京</span>
                <span>北京市</span>
                <span>海淀区</span>
                <span>清海街道</span>
                <span class="update">修改</span>
              </div>
            </div>
            <div class="site-bottom">
              <span class="spot-goods">有现货</span>
            </div>
          </div>
          <!-- 商品类型 -->
          <div class="goods-type">
            <div class="color">选择规格</div>
            <div class="color-select">
              <div class="hue">{{ good.value }}</div>
            </div>
          </div>
          <!-- 已选 商品详情 -->
          <div class="shop-detail">
            <div class="shop-detail-top">
              <span>{{ good.name }}元</span>
              <span>{{ good.price_max }}元</span>
            </div>
            <h2>总计：{{ good.price_max }}元</h2>
          </div>
          <!-- 加入购物车  喜欢 -->
          <div class="btn">
            <!-- <router-link
              :to="{
                path: '/AddCartSuccess',
                query: {
                  id: good.product_id,
                },
              }"
            > -->
            <router-link
              :to="{
                path: '/AddCartSuccess',
                query: {
                  id: good.product_id,
                },
              }"
            >
              <div class="btn-shop" @click="addCart">加入购物车</div>
            </router-link>

            <div class="btn-love">
              <span class="iconfont icon-aixin"></span>
              喜欢
            </div>
          </div>
          <!-- 店家说明 -->
          <div class="shopsInfo">
            <span>
              <i class="iconfont icon-gouxuan"></i>
              小米自营
            </span>
            <span>
              <i class="iconfont icon-gouxuan"></i>
              小米发货
            </span>
            <span>
              <i class="iconfont icon-gouxuan"></i>
              支持7天无理由退货(安装后不支持)
            </span>
            <span>
              <i class="iconfont icon-gouxuan"></i>
              运费说明
            </span>
            <span>
              <i class="iconfont icon-gouxuan"></i>
              企业信息
            </span>
          </div>
        </div>
      </div>
      <!-- 付款流程 -->
      <div class="flowpath">
        <div class="PreSale">
          <h2>
            预售流程
            <i class="iconfont icon-wenhao"></i>
          </h2>
        </div>
        <div class="indexbox">
          <div class="imprest">
            <i class="iconfont icon-yinxingqiarenzheng"></i>
            <div class="box">
              <span class="index">1.支付预付款</span>
              <span class="date">
                2021年 10月20日 20:00 - 2021年 10月31日 23:55
              </span>
            </div>
          </div>
          <div class="retainage">
            <i class="iconfont icon-yinxingqiarenzheng"></i>
            <div class="box">
              <span class="index">2.支付尾款</span>
              <span class="date">
                2021年 11月01日 20:00 - 2021年 11月03日 23:59
              </span>
            </div>
          </div>
          <div class="shipments">
            <i class="iconfont icon-yinxingqiarenzheng"></i>
            <div class="box">
              <span class="index">3.商品发货</span>
              <span class="date">尾款支付后2日内发货</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 价格说明 -->
      <div class="price-description">
        <div class="description-box">
          <h3>价格说明</h3>
          <img src="./images/cnt.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetGoodsDetail } from '@/api/detail'
import { mapMutations } from 'vuex'
import Zoom from './Zoom/Zoom.vue'

export default {
  name: 'detail',
  data() {
    return {
      good: {},
    }
  },
  methods: {
    ...mapMutations(['ADDSHOPITEMMUTATION']),
    async addCart() {
      const res = await reqGetGoodsDetail(this.$route.query.id)
      // console.log('shopCart', res)
      if (!res) return
      this.ADDSHOPITEMMUTATION(res)
    },
  },
  components: {
    Zoom,
  },
  async mounted() {
    // 获取对应id的商品信息
    const { id } = this.$route.query
    const res = await reqGetGoodsDetail(id)
    this.good = res
  },
}
</script>

<style lang="less" scoped>
@import './icon/iconfont.css';
* {
  margin: 0;
  padding: 0;
}
.detailWrap {
  width: 100%;
}
.detailContainer {
  background-color: #fff;
}
// 头部
.detail-header {
  width: 1226px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  .header-left {
    clear: #424242;
    font-size: 16px;
    a {
      text-decoration: none;
      font-size: 12px;
      &:hover {
        color: red !important;
      }
    }
  }
  .header-right-list {
    display: flex;
    li {
      padding: 0 10px;
      border-right: 2px solid #ccc;
      color: #616161;
      cursor: pointer;
      &:hover {
        color: red;
      }
    }
    .clearborder {
      border: transparent;
    }
  }
}
// 跳转登录
.login {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  background-color: #f7f7f7;
  a {
    margin: 0 10px 0 30px;
    color: #fe674f;
  }
  i {
    color: #b5b5b5;
  }
}

// 商品详情区
.centre {
  display: flex;
  width: 1226px;
  margin: 0 auto;
  min-height: 700px;
  padding-top: 40px;
  // 商品详情区 左边栏
  // .centre-left {
  //   width: 600px;
  //   img {
  //     width: 560px;
  //     height: 560px;
  //   }
  // }
}
// 商品详情区 右边栏
.centre-rigth {
  width: 600px;
  margin-left: 10px;
  .centre-rigth-title {
    // border: 1px solid green;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    h2 {
      color: #212121;
      font-size: 20px;
      font-weight: normal;
    }
    p {
      color: #ff7200;
      margin: 10px 0 15px 0;
      span {
        color: #b0b0b0;
      }
    }
    .shop {
      color: #ff7200;
    }
    .goods-price {
      color: #ff7200;
      font-size: 18px;
      padding: 10px 0;
    }
  }
  .centre-rigth-earnest {
    margin: 15px 0;
    background-color: #ff5108;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 52px;
    .centre-rigth-countdown {
      padding-right: 10px;
    }
  }
  .centre-rigth-earnest-left {
    margin: 10px 0 5px 20px;
    .top {
      margin: 0 0 6px 10px;
      .top-subscription {
        font-size: 14px;
      }
      .top-price {
        font-size: 18px;
      }
      .top-voucher {
        background-color: #fff;
        color: #ff5108;
        margin-left: 10px;
        border-radius: 20px;
        padding: 0 8px;
        font-size: 10px;
      }
    }
  }
  .site {
    background-color: #fafafa;
    border: 1px solid #ccc;
    padding: 30px 0 30px 20px;
    margin: 20px 0;
    .address {
      color: #333333;
      i {
        margin-right: 10px;
      }
      span {
        margin-right: 10px;
      }
      .update {
        margin-left: 10px;
        color: #fe7e00;
      }
    }
    .site-bottom {
      font-size: 14px;
      padding-left: 25px;
      .spot-goods {
        color: #fe7e00;
      }
      // .final {
      //   margin-left: 5px;
      //   color: #b0b0b0;
      // }
    }
  }
  // 商品类型
  .goods-type {
    .color-select {
      display: flex;
      flex-wrap: wrap;
    }
    .color {
      font-size: 18px;
      margin-bottom: 15px;
    }
    .hue {
      width: 290px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 14px;
      color: #fe7e00;
      border: 1px solid #fe7e00;
      margin: 0 5px 5px 0;
    }
  }

  .shop-detail {
    background-color: #f9f9fa;
    width: 600px;
    height: 170px;
    margin: 20px 0 30px 0;
    padding: 30px 20px;
    box-sizing: border-box;
    .shop-detail-top {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      padding: 0 10px;
    }
    div {
      color: #616161;
      margin-bottom: 15px;
    }
    h2 {
      color: #ff6700;
      font-weight: normal;
      font-size: 22px;
      margin-top: 30px;
      margin: 30px 0 0 15px;
    }
  }
  // 加入购物车
  .btn {
    height: 52px;
    color: #fff;
    display: flex;
    text-align: center;
    font-size: 14px;
    .btn-shop {
      width: 300px;
      background-color: #ff6700;
      line-height: 52px;
      color: #fff;
      text-decoration: none;
    }
    .btn-love {
      width: 140px;
      background-color: #b0b0b0;
      line-height: 52px;
      margin-left: 10px;
      box-sizing: border-box;
      &:hover {
        background-color: #8a8a8a;
      }
    }
  }
  .shopsInfo {
    margin: 20px 0;
    color: #b0b0b0;
    span {
      display: inline-block;
      margin: 0 15px 15px 0;
    }
  }
}

// 付款流程
.flowpath {
  width: 1226px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  height: 70px;
  box-sizing: border-box;
  .PreSale {
    width: 200px;
    border: 1px solid #ccc;
    color: #ff6700;
    background-color: #f9f9fa;
    h2 {
      font-weight: normal;
      font-size: 20px;
      line-height: 70px;
      .icon-wenhao {
        font-size: 16px;
      }
    }
  }
  .indexbox {
    border: 1px solid #ccc;
    background-color: #f9f9fa;
  }
  .imprest,
  .retainage {
    width: 370px;
  }
  .shipments {
    width: 260px;
  }
  .iconfont {
    margin-right: 10px;
  }
  div {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-yinxingqiarenzheng {
      font-size: 45px;
      color: #bababa;
    }
    .box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: #636363;
      span {
        font-size: 14px;
        text-align: left;
      }
      .date {
        font-size: 10px;
      }
    }
  }
}
// 价格说明
.price-description {
  width: 100%;
  background-color: #f5f5f5;
  padding-bottom: 50px;
  .description-box {
    width: 1226px;
    margin: 0 auto;
    h3 {
      width: 1226px;
      height: 76px;
      padding: 22px 0;
      font-size: 22px;
      font-weight: 400;
      box-sizing: border-box;
    }
    img {
      width: 1226px;
      height: 189px;
    }
  }
}
</style>
